<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script id="vShader" type="x-shader/x-fragment">
attribute vec2 a_position;
void main(){
    gl_Position = vec4(a_position,1.0,1.0);
}
</script>
<script id="fShader" type="x-shader/x-fragment">
void main(){
    gl_FragColor = vec4(0.0, 1.0,1.0,1.0);
}
</script>
<canvas id="canvas"></canvas>
<script>
    let canvas = document.getElementById('canvas');
    let gl = canvas.getContext('webgl');
    function createShader(gl, shaderType, shaderCode) {
        let shader = gl.createShader(shaderType);
        gl.shaderSource(shader, shaderCode);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
            console.log('compile shader fail ' + gl.getShaderInfoLog(shader));
        }
        return shader;
    }
    

    let vShader = createShader(gl, gl.VERTEX_SHADER, document.getElementById('vShader').text);
    let fShader = createShader(gl, gl.FRAGMENT_SHADER, document.getElementById('fShader').text);

    let program = gl.createProgram();
    gl.attachShader(program,vShader);
    gl.attachShader(program,fShader);
    gl.linkProgram(program);


    let buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
    gl.bufferData(gl.ARRAY_BUFFER,
        new Float32Array([
            0,0,
            1,0,
            1,1
        ]), gl.STATIC_DRAW
    );
    gl.useProgram(program);

    let positionLocation = gl.getAttribLocation(program, 'a_position');
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2,gl.FLOAT,false, 0,0);

    gl.drawArrays(gl.TRIANGLES, 0,3);





</script>
</body>
</html>